<template>
  <view>
    <uni-nav-bar fixed leftWidth="0" rightWidth="60rpx" backgroundColor="#EA0D2C" rightIcon="plusempty" color="#FFF">
      <view class="input-view">
        <uni-icons
          class="input-uni-icon"
          type="search"
          size="18"
          color="#999"
        />
        <input
          confirm-type="search"
          class="nav-bar-input"
          type="text"
          placeholder="输入搜索关键词"
        />
      </view>
      
    </uni-nav-bar>
    <view v-if="categoryList.length" class="category-content">
      <ut-menu-grid :data="categoryList" @select="onSelect"/>
    </view>
		
		<view class="goods-block">
			<s-goods-card ref="xgood" :data="goodsCard.data" :styles="goodsCard.style" :params="params" from="shop"/>
		</view>
    
    <!-- 选择客户 -->
    <!-- <selectCustomerModal v-if="showCustomer" @select="onSelectCustomer" @close="showCustomer = false"/> -->
  </view>
</template>


<script setup>
import { computed, nextTick, ref, watch } from 'vue';
  import {
    onLoad,
    onShow,
    onPageScroll,
    onPullDownRefresh,
    onReachBottom
  } from '@dcloudio/uni-app';
	import { useI18n } from 'vue-i18n';
	import { useStore } from "vuex"
	import { ajax } from "@/http"
	// import selectCustomerModal from '@/pages/components/select-customer.vue';


	const categoryList = ref([])
	const xgood = ref(null)
	const customerName = ref(null)
  const showCustomer = ref(false)

	const goodsCard = {
		data: {
			mode: 3,
			goodsFields: {
				title: { show: 1 },
				subtitle: { show: 1 },
				price: { show: 0 },
				original_price: { show: 0 },
				sales: { show: 0 },
				stock: { show: false }
			},
			buyNowStyle: {
				mode: 1,
				text: "购物车",
				color1: "#E9B461",
				color2: "#EECC89",
				src: "/storage/decorate/20221115/4782356b4587dc4f4a218f2540a0bafc.png",
				right: '20rpx',
				bottom:"18rpx"
			},
			tagStyle: { show: 0, src: "" },
			params: { orderField: 'sort', orderSort: 'asc' },
			borderRadiusTop: 6,
			borderRadiusBottom: 6,
			space: 8
		},
		style: {
			background: { type: "color", bgImage: "", bgColor: "" },
			marginLeft: 8,
			marginRight: 8,
			marginTop: 0,
			marginBottom: 10,
			borderRadiusTop: 0,
			borderRadiusBottom: 0,
			padding: 0
		}
	};

	const store = useStore()

	const customer = computed(() => store.state.customer.current);

	const selectCnd = ref('sample')
	const params = ref({})

	watch(() => customer.value,
		(nv) => {
			console.log('======>', nv)
		},
		{ immediate: true }
	)

  const barHeight = ref(0)

	const onSelect = (item) => {
		onTag(item)
	} 
	const onTap = () => {
    showCustomer.value = true
  }

	const onSelectCustomer = (item) => {
		sheep.$store('customer').$patch(state => {
			state.current = item
			customerName.value = item.customer_name
    	showCustomer.value = false
		})
	}

	const onTag = (category) => {
		console.log("category===", category)
		if (category.code !== 'category') {
			selectCnd.value = category
			params.value = category.isSelected ? { category_id: category.id } : {}
			nextTick(() => xgood.value.getList())
		} else {
			sheep.$router.go("/pages/index/category")
		}
	}

	// 下拉刷新
	onPullDownRefresh(() => {
		xgood.value.getList()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});
	// 上拉加载更多
	onReachBottom(() => {
		// 该事件必须申明,子组件才会触发该事件
	})
	onPageScroll(() => {});

	onLoad(async (options) => {
		const H = customer.value.customer_name ? 30 : 0
    // barHeight.value = (44 + 10 + H)+'px'
    // init(options)
		getCategoryList()
	});
	onShow(() => {
	})
	// 获取商品分类
	function getCategoryList() {
		categoryList.value = []
		const url = "/nature-business/api/category/tree_list"
		ajax.post(url, {category_type: "OOW_PRO_CAT"}).then(res => {
			console.log('====', res)
			res.forEach(child => {
				const data = {
					id: child.id,
					icon: child.category_code.replace(/\s/g,''),
					title: child.category_code,
					color: "#CCC",
					isSelected: false,
					code: child.category_code
				}
				categoryList.value.push(data)
			})
			categoryList.value.unshift({
				id: null,
				icon: "All",
				title: "All",
				color: "#CCC",
				isSelected: true,
				code: "All"
			})
			console.log({categoryList})
		})
		console.log({categoryList})
	}
</script>

<style lang="scss" scoped>

	$nav-height: 30px;

	.goods-block {
    /* #ifdef MP-WEIXIN || APP-PLUS || H5*/
		margin: 16rpx 32rpx 16rpx 32rpx;
    /* #endif */

    /* #ifdef H5 */
    // margin: 10rpx 20rpx 10rpx 20rpx;
    /* #endif */
		padding-bottom: 80rpx;
	}
	
	.home-customer-block {
		/* #ifdef H5 || APP-PLUS */
		margin: v-bind(barHeight) 12rpx 10rpx 0;
		/* #endif */

	}

	.icon-text {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;

		.text-info {
			display: flex;
			align-items: center;
			width: 440rpx;

			.left {
				width: 108rpx;
				height: 2rpx;
				background: #D8D8D8;
			}

			.center {
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				margin-left: 48rpx;
				margin-right: 48rpx;
			}

			.right {
				width: 108 rpx;
				height: 2 rpx;
				background: #D8D8D8;
			}
		}
	}

	.category-content {
		/* #ifdef H5 || APP-PLUS */
		margin: v-bind(barHeight) 20rpx 16rpx 20rpx;
		/* #endif */
		background-color: #FFF;
		border-radius: 12rpx;
		//grid-column-gap: v-bind(ml);
		.category-item {
			width: 112rpx;
			height: 190rpx;


			.ct-icon {
				width: 88rpx;
				height: 88rpx;
				padding-left: 12rpx;
			}

			.ct-text {
				margin-top: 16rpx;
			}
		}

	}

	.ut-tabbar-height {
		/* #ifdef H5 || APP-PLUS */
		margin-top: v-bind(barHeight);
		/* #endif */
	}

	.input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
  }
  
  .input-uni-icon {
    line-height: $nav-height;
  }
  
  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }
</style>
